<template>
    <div class="" id="facFaultMessage">
       
        <el-row >
            <el-col :span="22" :offset="1">
                <div class="permission-content ">
                  <el-form :inline="true" ref="form" :model="formData" label-width="70px">
                     
                     <el-form-item label="故障等级">
                       <el-select clearable v-model="formData.grade" placeholder="请选择">
                        <el-option
                          v-for="item in basic.grade"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_key">
                        </el-option>
                      </el-select>
                     </el-form-item>
                     <el-form-item label="设备编号">
                       <el-input v-model="formData.facCode"></el-input>
                     </el-form-item>
                  </el-form>
                 </div>
            </el-col>
            <el-col :span="2" :offset="19">
              <el-button v-preventReClick type="primary" @click="queryFacFaultMessage" style="margin-left:100px;">查询</el-button>
            </el-col>
        </el-row>
        <el-row>
           <el-col :span="22" :offset="1">
                <div class="permission-content bg-purple user-table">
                    <el-table
                    :data="tableData"
                    :cell-style="tableCellStyle"
                    empty-text="暂无数据"
                    
                    border
                    style="width: 100%">
                     <el-table-column
                     align="center"
                      prop="facCode"
                      label="设备编号"
                     >
                    </el-table-column>
                    <el-table-column
                    align="center"
                      prop="ErrorTime"
                      label="更新时间"
                     
                     >
                    </el-table-column>
                     <!-- <el-table-column
                      prop="ErrorID"
                      label="故障编号"
                     
                     >
                    </el-table-column> -->
                    <el-table-column
                    align="center"
                      prop="Grade"
                      width="100"
                      label="故障等级"
                      
                     >
                      <template slot-scope="scope">
                        {{basic.selGrade&&basic.selGrade[scope.row.Grade]}}
                      </template>
                    </el-table-column>
                    <el-table-column
                    align="center"
                      prop="ErrNote"
                      label="故障信息"
                      
                     >
                    </el-table-column>
                    <el-table-column
                    align="center"
                      prop="count"
                      label="故障次数"
                      
                     >
                    </el-table-column>
                     <!-- <el-table-column
                      prop="depat"
                      label="故障部件"
                     >
                    </el-table-column>
                     <el-table-column
                      prop="subdep"
                      label="故障子部件"
                     > 
                    </el-table-column>-->
                    <!--<el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                          <!-- <el-button v-preventReClick @click="delClick(scope.row)" type="text" size="small">删除</el-button>

                        </template>
                    </el-table-column> -->
                  </el-table>
                  <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryFacFaultMessage" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import { getFaultList,delFault} from '@/api/facility/facility'
import { mapState } from 'vuex'
import { disposeDict } from '@/utils/dicts'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
    data() {
      return{
          text:"测试",
          tableData:[],
          total:0,
          listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
          formData:{},
          basic:{
            grade:disposeDict('grade','arr'),
            selGrade:disposeDict('grade','obj'),

          },
          userMessage:{},
          dialogVisible:false
      }  
    },
    created(){
     this.queryFacFaultMessage()
     
    },
    mounted(){
    },
     computed:
     {
      
        // ...mapState(['basic'])
     },
    methods:{
      queryFacFaultMessage(){
        this.formData.listQuery=this.listQuery
        getFaultList(this.formData).then(res=>{
        this.tableData=res.data.arr
        this.total=res.data.total
          console.log(res.data)

      })
      },
       // 改变某一列单元格背景颜色
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row); // 基本都在这里面  其余的可自行打印
        // 这里写逻辑判断(看你是什么需求)
        // columnIndex === 2表示第三列
        if (columnIndex === 2) {
        // row.row.xxx代表你想改变单元格颜色的那个渲染值 可以根据状态给不同的颜色 比如 非常紧急 就给红色背景
        if(row.Grade == 1){
             return 'background:red;color:black ;'
        }else if(row.Grade == 2){
                return 'background:yellow;color:black;'
           }
        }
    },
      //查看详情
      handleClick(data){
        data.edit=true
        this.$router.push({
          path:'facMaintain',
          name:'facMaintain',
          params:data
        })
      },
      //删除故障信息
       delClick(data){
       delFault(data).then(res=>{
         this.$message({ 
          message: '删除成功',
          type: 'success'
        });
       })
       this.queryFacFaultMessage()
      },
      //关闭弹出框
      handleClose(){
        this.dialogVisible = false
      }
      
    }
}
</script>
<style lang='scss' scoped>
#facFaultMessage{
    padding: 20px 0;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .permission-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
</style>